<template>
	<div class="tophead">
		<!-- Swiper -->
	    <div class="swiper-container">
	        <div class="swiper-wrapper">
	            <div class="swiper-slide">
	            	<img :src="swilperImg"/>
	            </div>
	            <div class="swiper-slide">
	            	<img :src="swilperImg2"/>
	            </div>
	        </div>
	    </div>
	    
	    <!--搜索框-->
	    <p class="abs">
	    	<input id="title" class="fl f18" type="text" placeholder="输入配件名称或编码" name="keyWords">
	    	<button type="button" id="searchBtn" class="fl"></button>	
	    </p>
	</div>
	
</template>

<script>
	export default{
		data: function(){
			return {
				swilperImg:"src/assets/img/Carousel2.jpg",
				swilperImg2:"src/assets/img/Carousel2.jpg"
			}
		},
		mounted: function(){
			this.swiper();
		},
		methods:{
			swiper: function(){
				var swiper = new Swiper('.swiper-container', {
			        slidesPerView: 1,
			        paginationClickable: true,
			        spaceBetween: 30,
			         autoplay: 2000,
			        loop: true,
			       
			    });
			}
		}
	}
</script>

<style>
	@import url("../assets/css/swiper.min.css");
	.tophead{
		width: 100vw;
		overflow: hidden;
		position: relative
	}
	
	.swiper-container {
        width: 100%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .swiper-slide img{
    	width: 100%;
    }
</style>